import React, { RefObject } from 'react';
import { Button, Dropdown } from 'antd';
import {
  BoldOutlined,
  ItalicOutlined,
  LinkOutlined,
  PictureOutlined,
  CodeOutlined,
  MoreOutlined,
  UnorderedListOutlined,
  OrderedListOutlined,
  FontSizeOutlined,
} from '@ant-design/icons';
import './style.css';

interface MobileMarkdownToolbarProps {
  textareaRef: RefObject<HTMLTextAreaElement>;
  value: string;
  onChange: (value: string) => void;
}

const MobileMarkdownToolbar: React.FC<MobileMarkdownToolbarProps> = ({
  textareaRef,
  value,
  onChange,
}) => {
  const insertMarkdown = (before: string, after: string = '', placeholder: string = '') => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = value.substring(start, end) || placeholder;
    const newValue = value.substring(0, start) + before + selectedText + after + value.substring(end);

    onChange(newValue);

    // 恢复焦点和选择
    setTimeout(() => {
      textarea.focus();
      const newCursorPos = start + before.length + selectedText.length;
      textarea.setSelectionRange(newCursorPos, newCursorPos);
    }, 0);
  };

  const moreMenuItems = [
    {
      key: 'heading',
      label: '标题',
      icon: <FontSizeOutlined />,
      children: [
        {
          key: 'h1',
          label: 'H1 标题',
          onClick: () => insertMarkdown('# ', '', '标题文本'),
        },
        {
          key: 'h2',
          label: 'H2 标题',
          onClick: () => insertMarkdown('## ', '', '标题文本'),
        },
        {
          key: 'h3',
          label: 'H3 标题',
          onClick: () => insertMarkdown('### ', '', '标题文本'),
        },
      ],
    },
    {
      key: 'list',
      label: '列表',
      icon: <UnorderedListOutlined />,
      children: [
        {
          key: 'ul',
          label: '无序列表',
          onClick: () => insertMarkdown('- ', '', '列表项'),
        },
        {
          key: 'ol',
          label: '有序列表',
          onClick: () => insertMarkdown('1. ', '', '列表项'),
        },
        {
          key: 'checkbox',
          label: '任务列表',
          onClick: () => insertMarkdown('- [ ] ', '', '待办事项'),
        },
      ],
    },
    {
      type: 'divider' as const,
    },
    {
      key: 'code-block',
      label: '代码块',
      icon: <CodeOutlined />,
      onClick: () => insertMarkdown('```\n', '\n```', '代码'),
    },
    {
      key: 'quote',
      label: '引用',
      icon: <></>,
      onClick: () => insertMarkdown('> ', '', '引用内容'),
    },
    {
      key: 'divider-md',
      label: '分隔线',
      icon: <></>,
      onClick: () => insertMarkdown('\n---\n', '', ''),
    },
  ];

  return (
    <div className="mobile-markdown-toolbar">
      <div className="toolbar-buttons">
        {/* 常用工具 */}
        <Button
          type="text"
          icon={<BoldOutlined />}
          onClick={() => insertMarkdown('**', '**', '粗体文本')}
          className="toolbar-button h-touch w-touch"
          title="粗体"
        />
        <Button
          type="text"
          icon={<ItalicOutlined />}
          onClick={() => insertMarkdown('*', '*', '斜体文本')}
          className="toolbar-button h-touch w-touch"
          title="斜体"
        />
        <Button
          type="text"
          icon={<LinkOutlined />}
          onClick={() => insertMarkdown('[', '](url)', '链接文本')}
          className="toolbar-button h-touch w-touch"
          title="链接"
        />
        <Button
          type="text"
          icon={<PictureOutlined />}
          onClick={() => insertMarkdown('![', '](url)', '图片描述')}
          className="toolbar-button h-touch w-touch"
          title="图片"
        />

        {/* 更多工具菜单 */}
        <Dropdown
          menu={{ items: moreMenuItems }}
          placement="topRight"
          trigger={['click']}
        >
          <Button
            type="text"
            icon={<MoreOutlined />}
            className="toolbar-button h-touch w-touch"
            title="更多"
          />
        </Dropdown>
      </div>
    </div>
  );
};

export default MobileMarkdownToolbar;
